class EleLoading extends HTMLElement {
  constructor() {
    super()
    // 声明存储所有圆的数组
    this.circles = []
    this.svgNS = 'http://www.w3.org/2000/svg'
  }

  connectedCallback() {
    // 创建影子元素
    const shadow = this.attachShadow({ mode: 'open' })

    // 创建包裹元素
    const loadingWrapper = document.createElement('div')

    // 创建页面结构元素
    const loadingContainer = document.createElement('div')
    const loadingAnimation = document.createElement('div')

    let r = 140
    for (let i = 1; i <= 4; i++) {
      const loadingBox = document.createElement('div')
      loadingAnimation.appendChild(loadingBox)
      loadingBox.classList.add('loading-box')

      // 创建svg
      this.svg = document.createElementNS(this.svgNS, 'svg')
      loadingBox.append(this.svg)
      this.svg.setAttribute('width', '350')
      this.svg.setAttribute('height', '250')

      // 创建圆
      const circle = document.createElementNS(this.svgNS, 'circle')
      circle.setAttribute('r', `${r -= 20}`)
      circle.setAttribute('cx', '175')
      circle.setAttribute('cy', '125')
      circle.style.fill = 'none'
      circle.style.strokeWidth = '2'
      circle.id = `circle-${i}`

      this.svg.appendChild(circle)
      // 将所有的圆添加添加到circles数组中
      this.circles.push(circle)
    }

    this.loadingText = document.createElement('div')

    // 设置属性
    loadingWrapper.classList.add('loading-wrapper')
    loadingContainer.classList.add('loading-container')
    loadingAnimation.classList.add('loading-animation')
    this.loadingText.classList.add('loading-text')
    const text = this.getAttribute('loading-text')
    this.loadingText.innerText = text || 'Loading...'

    // 挂载元素
    loadingWrapper.appendChild(loadingContainer)
    loadingContainer.appendChild(loadingAnimation)
    loadingWrapper.appendChild(this.loadingText)
    // 将页面结构元素挂载到影子元素上
    shadow.appendChild(loadingWrapper)

    // 定义方法
    function getRandomColor() {
      // 生成十六进制的随机颜色值
      const color = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
      let colorStr = '#'
      for (let i = 1; i <= 6; i++) {
        const random = Math.floor(Math.random() * color.length)
        colorStr += color[random]
      }

      // 生成随机的RGB值
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      const rgb = `${r},${g},${b}`

      return colorStr || rgb
    }

    setInterval(() => {
      this.loadingText.style.color = getRandomColor()
    }, 1000)

    this.circles.forEach(circle => {
      setInterval(() => {
        circle.style.stroke = getRandomColor()
      }, 1000)
    })

    // 设置样式
    const style = document.createElement('style')
    style.textContent = `
            .loading-wrapper {
                width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .loading-container {
                width: 350px;
                height: 250px;
                border-radius: 5px;

                .loading-animation {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    position: relative;

                    .loading-box {
                        width: 100%;
                        height: 100%;
                        position: absolute;

                        &:first-child {
                            animation: loading-clockwise 1.5s linear infinite;
                        }
                        &:nth-child(2) {
                            animation: loading-counterclockwise 1.5s linear infinite;
                        }
                        &:nth-child(3) {
                            animation: loading-clockwise 1.5s linear infinite;
                        }
                        &:last-child {
                            animation: loading-counterclockwise 1.5s linear infinite;
                        }
                    }
                }

            }
            .loading-text {
                    width: 100%;
                    height: 100px;
                    white-space: nowrap;
                    text-align: center;
	                  place-content: center;
                    color: #00bfff;
                    font-size: 40px;
                    font-weight: bold;
	                  transition: color 1s linear;
                }

            #circle-1 {
	              stroke: #00bfff;
                stroke-dasharray: 754;
                stroke-dashoffset: 754;
                animation: draw 1s linear infinite;
            }

            #circle-2 {
                stroke: #00bfff;
                stroke-dasharray: 314;
                stroke-dashoffset: 314;
                animation: draw 1s linear infinite alternate;
            }

            #circle-3 {
	            stroke: #00bfff;
                stroke-dasharray: 251;
                stroke-dashoffset: 251;
                animation: draw 1s linear infinite;
            }

            #circle-4 {
                stroke: #00bfff;
                stroke-dasharray: 188;
                stroke-dashoffset: 188;
                animation: draw 1s linear infinite alternate;
            }

            @keyframes draw {
                to {
                    stroke-dashoffset: 0; /* 偏移量归零，形成绘制效果 */
                }
            }

            @keyframes loading-clockwise {
                to {
                    transform: rotate(360deg);
                }
            }

            @keyframes loading-counterclockwise {
                to {
                    transform: rotate(-360deg);
                }
            }
        `
    shadow.appendChild(style)
  }
}

customElements.define('ele-loading', EleLoading)
